<template>
  <el-form-item
    :rules="item.rule"
    :label="item.label"
    :prop="item.prop"
    ref="formItem"
  >
    <el-cascader
      v-model="selectedData"
      :options="item.children"
      :props="item.props"
      collapse-tags
      :disabled="item.disabled"
      @change="change"
      :placeholder="
        item.placeholder === undefined ? '请选择' : item.placeholder
      "
      :clearable="item.clearable === undefined ? true : item.clearable"
      :filterable="item.filterable"
      :filter-method="filterMethod"
      ref="com"
    >
    </el-cascader>
    <div
      ref="myTipRef"
      v-show="myTip"
      class="selected-myTip"
      @click="myTipClick"
    >
      <span>{{ myTip }}</span>
    </div>
  </el-form-item>
</template>

<script>
export default {
  name: "cascaderCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isReset: {
      type: Boolean,
      default: () => {
        return false;
      }
    }
  },
  data() {
    return {
      myTip: "",
      selectedData: []
    };
  },
  watch: {
    isReset(newVal, oldVal) {
      // console.log("cascaderCom是否重置：", newVal);
      if (newVal) {
        // 重置数据
        this.selectedData = this.formData[this.item.prop];
      }
    },
    formData: {
      handler(newVal, oldVal) {
        const props = this.item.props;
        if (props) {
          this.selectedData = props.multiple
            ? newVal[this.item.prop] || []
            : newVal[this.item.prop];
        }
      },
      immediate: true,
      deep: true
    },
    selectedData: function(select, oldVal) {
      let com = this.$refs.com;
      this.formData[this.item.prop] = select;
      // 多选的时候显示 已选N项
      if (this.item.props && this.item.props.multiple) {
        // 计算文本框的宽度
        com.$el.querySelector(".el-cascader__tags").innerText = "";
        com.$el.querySelector(".el-input__inner").style.height = "32px";
        this.myTip =
          select && select.length > 0 ? "已选" + select.length + "项" : "";
        this.$nextTick(() => {
          this.$refs.myTipRef.style.width = "70%";
          this.$refs.myTipRef.style.top =
            this.$refs.com.$el.offsetTop + 1 + "px";
        });
      }
    }
  },
  methods: {
    myTipClick() {
      let dropDownVisible = this.$refs.com.dropDownVisible;
      this.$refs.com.dropDownVisible = !dropDownVisible;
    },
    change(select) {
      let com = this.$refs.com;
      const props = this.item.props;
      if (!(props && props.multiple)) {
        // 点击最后一行关闭弹窗操作单选
        com.dropDownVisible = false;
      }
      if (this.item.change) {
        let checkedNodesLeafOnly =
          com && com.getCheckedNodes ? com.getCheckedNodes() : null;
        this.item.change(select, this.selectedData, checkedNodesLeafOnly);
      }
      this.$nextTick(() => {
        this.$refs.formItem.clearValidate();
      });
    },
    filterMethod(node, keyword) {
      if (this.item.filterMethod) {
        this.item.filterMethod(node, keyword);
      }
    }
  },
  mounted() {
    this.selectedData = this.formData[this.item.prop];
    this.$nextTick(() => {
      // 级联选择器 单选/多选时 点击行文字交互情况：无子集数据时认为选中，有子集数据时仅默认展开不能选中
      // 注意： 当前数据必须知道自己有子集，如果是动态加载，那么接口需提供每条数据是否有子集的标识
      const elements = this.$refs.com.$el.querySelector(".el-cascader-panel");
      elements.addEventListener("click", function(ev) {
        const target = ev.target || ev.srcElement;
        if (target.className != "el-cascader-node__label") {
          return false;
        }
        console.log("target.className", target.className, target.innerHTML);
        const targetParent = target.parentElement;
        const isChild = targetParent.querySelector(".el-icon-arrow-right");
        if (!isChild) {
          const isCheckboxEl = targetParent.querySelector(
            ".el-checkbox__original"
          );
          if (isCheckboxEl) {
            isCheckboxEl.click();
          }
          const isRadioEl = target.parentElement.querySelector(
            ".el-radio__original"
          );
          if (isRadioEl) {
            isRadioEl.click();
          }
        }
      });
    });
  }
};
</script>

<style scoped lang="scss">
.selected-myTip {
  position: absolute;
  height: 29px;
  top: 5px;
  left: 1px;
  font-size: 14px;
  line-height: 32px;
  padding-left: 14px;
  background: #ffffff;
  cursor: pointer;
  color: #606266;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
